<template>
	<view class="content">
		<view class="card-box" v-if="show">
			<view class="people-img">
				<image :src="userInfo.base64Img"></image>
			</view>
			<image class="logo-img rotate" src="../../static/logo.png"></image>
			<view class="card-info">
				<view class="company-info" style="color: #FFFFFF;">{{userInfo?userInfo.name?userInfo.name:'':''}}</view>
				<!-- <image class="qr-img" src="../../static/qrcode.jpg"></image> -->
				<canvas canvas-id="qrcode" style="width: 160px;height: 160px;margin: 30upx auto;" />
			</view>
			<view class="hit-bottom">
				请截屏保留电子证页面，快速刷人脸入场。
			</view>
		</view>
		<view style="height: 100vh;text-align: center;" v-else>
			<view style="color: #FFFFFF;font-size: 148upx;margin-top: 200upx;">404 err</view>
			<u-button style="margin-top: 100upx;" @click="retry">重试</u-button>
		</view>
	</view>
</template>

<script>
	import uQRCode from"../../js_sdk/Sansnn-uQRCode/uqrcode.js"
	export default {
		data() {
			return {
				color: {r: 8,g: 0,b: 245,a: 1},
				show: true,
				userInfo:{
					base64Img: '',
					name: '', // 姓名
					phone: '', // 手机号
					idCode: '', // 身份证号
					idType:{
						value: 'ID_CARD',
						label: '身份证'
					},
				}
			}
		},
		onLoad(option) {
			console.log(option);
			this.userInfo = getApp().globalData.userInfo;
			if(!this.userInfo || !this.userInfo.name || !this.userInfo.idCode) {
				this.show = false;
			}
			this.uMatting()
		},
		onReady() {
			this.$nextTick(function(){
				if(this.show) this.initQR();
			})
		},
		methods: {
			// 扣背景
			uMatting() {
				let image_base64 = this.userInfo.base64Img.split(",")[1];//去掉base64前缀
				uni.showLoading({
				    title: '验证中...'
				});
				this.$api._zjzGeneral(image_base64)
					.then(res=> {
						console.log(res);
						uni.hideLoading();
						if(res.data.success) {
							this.userInfo.base64Img = res.data.result;
							console.log(this.userInfo.base64Img)
							// this.result = res.data;
						}
					})
					.catch(err => {
						console.log(err)
						// this.result = err;
						uni.hideLoading();
						uni.showToast({
						    title: '系统内部异常',
							icon: 'none',
						    duration: 2000
						});
					})
			},
			initQR() {
				let content = JSON.stringify({idCode: this.userInfo.idCode,name:this.userInfo.name,idType: this.userInfo.idType.value,phone: this.userInfo.phone});
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: content,
					size: 160,
					margin: 10,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H
				}).then(res => {
				  console.log(res)
				})
			},
			retry() {
				uni.navigateTo({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style scoped>
	@keyframes rotate{
	 
		0%{-webkit-transform:rotate(0deg);}
	 
		50%{-webkit-transform:rotate(180deg);}
	 
		100%{-webkit-transform:rotate(360deg);}
	}
	 
	.rotate{
	    transition: 0.5s;
	    transform-origin: 30px 30px;  
	    animation: rotate 5s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
	}
	page{
		height: 100vh;
		background-color: #000;
	}
	.content{
		padding: 0 20upx;
		padding-top: 10upx;
	}
	.card-box{
		/* background-image: url(../../static/card.jpg); */
		border-radius: 15upx;
		background-color: rgb(41, 51, 85);
		/* background-size: 100% 100%; */
		position: relative;
		width: 100%;
		height: 1300upx;
	}
	.card-box .logo-img{
		width: 100upx;
		height: 100upx;
		position: absolute;
		right: 40upx;
		top: 100upx;
	}
	.people-img{
		position: absolute;
		top: 80upx;
		left: 0;
		right: 0;
		margin: auto;
		width: 320upx;
		height: 400upx;
	}
	.people-img image{
		width: 100%;
		height: 100%;
	}
	
	.card-info{
		margin: auto;
		position: absolute;
		top: 550upx;
		left: 0;
		right: 0;
	}
	.card-info .company-info{
		font-weight: 600;
		font-size: 46upx;
		margin: auto;
		text-align: center;
	}
	.card-info .qr-img{
		width: 320upx;
		height: 320upx;
		margin: auto;
		display: block;
		padding-top: 20upx;
	}
	.hit-bottom{
		position: absolute;
		bottom: 15upx;
		left: 0;
		right: 0;
		text-align: center;
		height: 250upx;
		background-color: rgba(0,0,0,.5);
		color: #FFFFFF;
		font-size: 58upx;
		font-weight: 600;
		/* line-height: 1.5; */
		padding: 75upx 0;
	}
</style>
